// 此处用来存放路由组件
// 引入页面级组件 Home
import Home from '../pages/Home/Home'
import { lazy, Suspense } from 'react'

// 处理错误虚拟路径问题(网页找不到问题)
import NotFound from '../pages/NotFound/NotFound';
import { Navigate } from 'react-router-dom'

// 引入页面级组件 Refs
// import Refs from '../pages/Refs/Refs';

// 引入页面级组件 Hooks
// import Hooks from '../pages/Hooks/Hooks'

// todolist案例
// import TodoLisi from '../pages/TodoList/TodoList.jsx'

// 王者荣耀案例
// import Heros from '../pages/Heros/Heros'
// 英雄动态路由
// import Heroscon from '../pages/Heroscon/Heroscon'

// 段子
// import Duanzi from '../pages/Duanzi/Duanzi.jsx';

// // 新闻
// import News from '../pages/News/News'
// import Guonei from '../pages/Guonei/Guonei'
// import Junshi from '../pages/Junshi/Junshi'


let Refs = lazy(() => import('../pages/Refs/Refs'));
let Hooks = lazy(() => import('../pages/Hooks/Hooks'));
let TodoList = lazy(() => import('../pages/TodoList/TodoList'));
let Heros = lazy(() => import('../pages/Heros/Heros'));
let Heroscon = lazy(() => import('../pages/Heroscon/Heroscon'));
let Duanzi = lazy(() => import('../pages/Duanzi/Duanzi'));
let News = lazy(() => import('../pages/News/News'));
let Guonei = lazy(() => import('../pages/Guonei/Guonei'));
let Junshi = lazy(() => import('../pages/Junshi/Junshi'));
// let Redux = lazy(() => import('../pages/Redux'))
let ReduxUpdate = lazy(() => import('../pages/ReduxUpdate/ReduxUpdate.jsx'));



// 封装懒加载
let load = (Comp) => { // 这里的Comp首字母必须大写,并且函数一定要有return
    return <Suspense fallback={<div>正在加载中,请稍后...</div>}>
        <Comp />
    </Suspense>
}



export default [
    {
        path: '/',
        element: <Home></Home>,
        meta: {
            title: '首页',
            isShow: true
        }
    },
    // 旧版
    // {
    //     path: '/redux',
    //     element: load(Redux),
    //     meta: {
    //         title: 'redux',
    //         isShow: true
    //     }
    // },
    // 新版redux
    {
        path: "/reduxupdate",
        element: load(ReduxUpdate),
        meta: {
            title: '新版redux',
            isShow: true
        }
    },
    {
        path: "/ref",
        element: load(Refs),
        meta: {
            title: 'ref',
            isShow: true
        }
    },
    {
        path: "/todolist",
        element: load(TodoList),
        meta: {
            title: 'todolist',
            isShow: true
        }
    },
    {
        path: "/heros",
        element: load(Heros),
        meta: {
            title: '英雄',
            isShow: true
        }
    },
    // {
    //     path: "/heroscon/:id/:name",  // 动态传参
    //     element: <Heroscon />,
    //     meta: {
    //         title: '英雄',
    //         isShow: false
    //     }
    // },
    // {
    //     path: "/heroscon", // 静态传参，使用useSearchParams() hook接收参数(参数是个数组)
    //     element: <Heroscon />,
    //     meta: {
    //         title: '英雄',
    //         isShow: false
    //     }
    // },
    {
        path: "/heroscon",    // 静态传参，使用useLocation()接收参数(参数是个对象)
        element: load(Heroscon),
        meta: {
            title: '英雄',
            isShow: false
        }
    },
    {
        path: "/duanzi",
        element: load(Duanzi),
        meta: {
            title: '段子',
            isShow: true
        }
    },
    {
        path: "/hooks",
        element: load(Hooks),
        meta: {
            title: 'hooks',
            isShow: true
        }
    },
    {
        path: "/news",  // 路径
        element: load(News),   //组件
        meta: {
            title: '新闻',
            isShow: true
        },
        children: [ //子路由
            {
                path: "/news/guonei",
                element: load(Guonei)
            },
            {
                path: "junshi",
                element: load(Junshi)
            },
            {
                index: true,
                element: <Navigate to="/news/guonei" />
            }
        ]
    },
    {
        path: "*",
        element: <NotFound />,
        meta: {
            title: '404',
            isShow: false
        }
    }

]



